<template>
  <div class="search">
		<input
		  type="text"
		  class='header-input'
		  placeholder='请输入城市名和拼音'
			v-model="searchCity">
			<!--
				input框输入数据时显示搜索城市信息
				因此当searchCity有值时显示
			-->
		  <div class="search-content" v-show="searchCity">
		    <ul>
		      <li class='search-item border-bottom' v-for="city in filterCity">{{city.name}}</li>
					<!-- 
						filterCity有数据时不显示, 即长度不为0时不显示
						无数据时显示, 即长度为0时显示
					-->
		      <li class='search-item border-bottom' v-show="isShow">未匹配到数据</li>
		    </ul>
		  </div>
  </div>
</template>

<script>
export default {
  name:'CitySearch',
	props: ["cities"],
	data(){
		return {
			searchCity: '',
		}
	},
	computed: {
		filterCity(){
			let result = []
			for(let key in this.cities){
				let cityList = this.cities[key]
				cityList.forEach((city,index)=>{
					if(city.name.includes(this.searchCity)||city.spell.includes(this.searchCity)){
						result.push(city)
					}
				})
			}
			/* 忘记方法写出来的比较原生的js代码
				for(let key in this.cities){
					let cityList = this.cities[key]
					for(let i=0; i<cityList.length; i++){
						if(cityList[i].name.includes(this.searchCity)||cityList[i].spell.includes(this.searchCity)){
							result.push(cityList[i].name)
						}
					}
				}
			*/
			return result;
		},
		isShow(){
			// this.filterCity.length为0/空时, 布尔值为false
			// 但是就是为空时显示"未匹配到数据"这一项, 因此取反
			return !this.filterCity.length;
		}
	}
}
</script>

<style lang='stylus' scoped>
.border-bottom::before
  border-color:#aaa
.search
  position:relative
  height:.72rem
  padding:0.1rem
  background-color:#00bcd4
  .header-input
    width:100%
    height:100%
    border-radius:.1rem
    text-align:center
  .search-content
    position:fixed
    z-index:20
    overflow:hidden
    top:1.78rem
    left:0
    right:0
    bottom:0
    background-color:#ccc
    .search-item
      line-height:.8rem
      padding-left:.2rem
      background-color:#fff
</style>
